<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>蜂巢装修网-设计师登录</title>
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="font_icon/iconfont.css" />
	<link rel="stylesheet" href="css/login.css">
	<link rel="shortcut icon" href="favicon.ico" />

	
</head>

<body>
	<!-- 头部 -->
	<header>
			<div class="header_wrap w">
				<ul>
					<li>
						<i class="iconfont">
							&#xe603;
						</i>
					</li>
					<li>
						<span id="city">
							金华
						</span>
					</li>
					<li>
						<a id="switch" href="javascript:;">[切换]</a>
					</li>
				</ul>
				<ul class="right">
					<li>
						<span>
							欢迎进入蜂巢网~
						</span>
					</li>
					<li>
						<a id="Business_login" href="./fc-company-login.html">
							商家登录
						</a>
					</li>
					<li>
						<a id="Stylist_login" href="./fc-owner-login.html">
							业主登录
						</a>
					</li>
					<li>
						<a id="Register" href="./fc-register.html">
							注册
						</a>
					</li>
					<li>
						<a id="Back_home" href="./fc-index.html">
							| 返回首页
						</a>
					</li>
				</ul>
			</div>
			<!-- 城市切换表 -->
			<div class="city_switchover hide-us" id="city_switchover">
				<div class="transition"></div>
				<div class="hot_citys">
					<p class="hot_city_title">热门城市：</p>
					<ul class="clearfix">
						<li>
							<a href="javascript:;">北京</a>
						</li>
						<li>
							<a href="javascript:;">上海</a>
						</li>
						<li>
							<a href="javascript:;">广州</a>
						</li>
						<li>
							<a href="javascript:;">深圳</a>
						</li>
						<li>
							<a href="javascript:;">成都</a>
						</li>
						<li>
							<a href="javascript:;">重庆</a>
						</li>
						<li>
							<a href="javascript:;">武汉</a>
						</li>
						<li>
							<a href="javascript:;">沈阳</a>
						</li>
						<li>
							<a href="javascript:;">大连</a>
						</li>
						<li>
							<a href="javascript:;">郑州</a>
						</li>
						<li>
							<a href="javascript:;">西安</a>
						</li>
						<li>
							<a href="javascript:;">南京</a>
						</li>
						<li>
							<a href="javascript:;">苏州</a>
						</li>
						<li>
							<a href="javascript:;">无锡</a>
						</li>
						<li>
							<a href="javascript:;">武汉</a>
						</li>
						<li>
							<a href="javascript:;">徐州</a>
						</li>
						<li>
							<a href="javascript:;">杭州</a>
						</li>
						<li>
							<a href="javascript:;">宁波</a>
						</li>
						<li>
							<a href="javascript:;">天津</a>
						</li>
						<li>
							<a href="javascript:;">昆明</a>
						</li>
						<li>
							<a href="javascript:;">南宁</a>
						</li>
						<li>
							<a href="javascript:;">合肥</a>
						</li>
						<li>
							<a href="javascript:;">长沙</a>
						</li>
						<li>
							<a href="javascript:;">青岛</a>
						</li>
						<li>
							<a href="javascript:;">泉州</a>
						</li>
						<li>
							<a href="javascript:;">兰州</a>
						</li>
						<li>
							<a href="javascript:;">东莞</a>
						</li>
						<li>
							<a href="javascript:;">惠州</a>
						</li>
						<li>
							<a href="javascript:;">佛山</a>
						</li>
						<li>
							<a href="javascript:;">贵阳</a>
						</li>
						<li>
							<a href="javascript:;">哈尔滨</a>
						</li>
					</ul>
					<p class="more_city">
						<a href="javascript:;">更多>></a>
					</p>
				</div>
			</div>
	</header>
	<!-- 蜂巢网logo和大标题 -->
	<div class="headline w clearfix">
		<h1 class="logo left">
			<a href="#">蜂巢网</a>
		</h1>
		<h2 class="left">
			欢迎登录<span>/设计师登录</span>
		</h2>
	</div>

	<div class="loginWraper w">
		<!-- loginBox登录框 -->
		<div class="loginBox right">
			<!-- 登录标题（登录模式） -->
			<div class="loginBox_tab">
					<ul>
						<li>
							<a class="active" href="#" id="IdLogin_a">
								账号登录
							</a>
							<span class="loginBox_tab_line" id="loginBox_tab_line"></span>
						</li>
						<li>
							<a href="#" id="NoteLogin_a">
								短信登录
							</a>
						</li>
					</ul>
			</div>
			<!-- id_login账号登录 -->
			<div class="id_login" id="id_login">
					<ul>
						<li class="clearfix">
							<i class="iconfont">&#xe647;</i>
							<input type="text" id="id_user" value="" placeholder="请输入您的手机号">
						</li>
						<li class="clearfix">
							<i class="iconfont">&#xe618;</i>
							<input type="password" id="id_password" value="" placeholder="请输入您的密码"/>
						</li>
						<li class="clearfix">
							<i class="iconfont">&#xe641;</i>
							<input type="text" name="verification" id="id_verification" value="" placeholder="验证码"/>
							<img src="img/其他/验证码.jpg"/>
						</li>
						<li>
							<input type="checkbox" name="remember_password" id="remember_password_cb" value="" checked="checked"/>
							<a href="#" id="Remember_password" >
								记住密码
							</a>
							<a href="#" id="Forget_password">
								忘记密码？
							</a>
						</li>
						<li>
							<button id="btn_idlogin">立即登录</button>
							<button id="btn_idback">退出登录</button>
						</li>
					</ul>
				</div>
				<!-- note_login短信登录 -->
				<div class="note_login hide-us" id="note_login">
					<ul>
						<li class="clearfix">
							<i class="iconfont">&#xe647;</i>
							<input type="text" id="note_user" value="" placeholder="请输入您的手机号"/>
						</li>
						<li class="clearfix">
							<i class="iconfont">&#xe641;</i>
							<input type="text" id="note_verification" value="" placeholder="短信验证码"/>
							<button id="send_note">发送短信</button>
						</li>
						<li>
							<button id="btn_notelogin">立即登录</button>
							<button id="btn_noteback">退出登录</button>
						</li>
					</ul>
				</div>
				<!-- 登录警示语 -->
				<label for="alert" id="alert">手机号不能为空！</label>
		</div>
	</div>

	<!-- 尾部 -->
	<footer>
		<div class="footer_info w">
			<ul class="clearfix">
				<li>
					<a href="./fc-aboutFC.html">关于我们</a>
				</li>
				<li>
					<a href="./fc-contactUs.html">联系我们</a>
				</li>
				<li>
					<a href="./fc-feedback.html">意见反馈</a>
				</li>
				<li>
					<a href="./fc-businessCooperation.html">商务合作</a>
				</li>
				<li>
					<a href="./fc-legalNotice.html">法律声明</a>
				</li>
			</ul>
			<p>免责声明：本网站部分内容由用户自行上传，如权利人发现存在误传其作品情形，请及时与本站联系。© 2018 蜂巢装修网 保留所有权利</p>
			<p class="footer-company-icp">
				<span>中国装修网 <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">增值电信业务许可证：粤B2-20120566号</a></span>
				<span><a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow" class="footer_y_icp">粤ICP备08125558号-1</a></span>
				<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030502001458" class="footer_new_ga"
					rel="nofollow">
				</a>
				<a href="https://szcert.ebs.org.cn/c0adeb1a-0ad1-476b-b4bd-661a79e90877" target="_blank" title="深圳市市场监督管理局企业主体身份公示"
					alt="深圳市市场监督管理局企业主体身份公示" rel="nofollow">
				</a>
				<a href="http://www.cyberpolice.cn/wfjb/" target="_blank" rel="nofollow">
					<i class="iconfont icon1">&#xe629;</i>
				</a>
				<a href="http://www.cyberpolice.cn/wfjb/" target="_blank" rel="nofollow">
				</a>
				<a href="https://search.szfw.org/cert/l/CX20140929005207005275" target="_blank" rel="nofollow">
					<i class="iconfont icon2">&#xe633;</i>
				</a>
				<a href="http://si.trustutn.org/info?sn=345170814029859496005&amp;certType=1" target="_blank" rel="nofollow">
					<i class="iconfont icon3">&#xe62f;</i>
				</a>
			</p>
		</div>
	</footer>

	<script src="./lib/jquery/jquery.min.js"></script>
	<script src="js/fc-base.js"></script>
	<script>
		function my$(id){
					return document.getElementById(id);
			}
			// 登录方式切换
			var IdLogin_aObj=my$("IdLogin_a");
			var NoteLogin_aObj=my$("NoteLogin_a");
			var loginBox_tab_lineObj=my$("loginBox_tab_line");
			var id_loginObj=my$("id_login");
			var note_loginObj=my$("note_login");
			
			//短信登录
			NoteLogin_aObj.onclick=function(){
				setReduction(id_user);
				setReduction(id_password);
				setReduction(id_verification);
				alertObj.style.display="none";
				IdLogin_aObj.className="";
				this.className="active";
				id_loginObj.style.display="none";
				note_loginObj.style.display="block";
				loginBox_tab_lineObj.style.left="190px";
			}
			//账号登录
			IdLogin_aObj.onclick=function(){
				setReduction(note_user);
				setReduction(note_verification);
				alertObj.style.display="none";
				NoteLogin_aObj.className="";  
				this.className="active";
				note_loginObj.style.display="none";
				id_loginObj.style.display="block";
				loginBox_tab_lineObj.style.left="62px";
			}

		//城市切换表显示
		$(document).ready(function () {
			$("#switch").hover(function () {
				$("#city_switchover").show();
			}, function () {
				$("#city_switchover").hide();
			});

			$("#city_switchover").hover(function () {
				$("#city_switchover").show();
			}, function () {
				$("#city_switchover").hide();
			});
		});
		
		// 账号登录校验
			var id_user=my$("id_user");
			var id_password=my$("id_password");
			var id_verification=my$("id_verification");
			var btn_idlogin=my$("btn_idlogin");
			var alertObj=my$("alert");

			function setRed(id) {
				id.style.border="1px solid red";
			}
			function setReduction(id) {
				alertObj.style.display = "none";
				id.style.border = "1px solid #ccc";
				id.style.borderStyle = "inset";
			}
			btn_idlogin.onclick=function(){
				if (id_user.value=="" && id_password.value=="" && id_verification.value=="") {
					alertObj.style.display="block";
					alertObj.style.top="63%";
					alertObj.innerHTML="请输入手机号、密码、验证码！";
					setRed(id_user);
					setRed(id_password);
					setRed(id_verification);
				}else if (id_user.value=="") {
					alertObj.style.display="block";
					setRed(id_user);
				}else if (id_password.value=="") {
					alertObj.style.display="block";
					alertObj.style.top="47.5%";
					alertObj.innerHTML="密码不能为空！";
					setRed(id_password);
				}else if (id_verification.value=="") {
					alertObj.style.display="block";
					alertObj.style.top="63%";
					alertObj.innerHTML="验证码不能为空！";
					setRed(id_verification);
				}
				id_user.onclick = function () {
					setReduction(id_user);
					setReduction(id_password);
					setReduction(id_verification);
				}
				id_password.onclick = function () {
					setReduction(id_user);
					setReduction(id_password);
					setReduction(id_verification);
				}
				id_verification.onclick = function () {
					setReduction(id_user);
					setReduction(id_password);
					setReduction(id_verification);
				}
			}

			//短信登录校验
			var note_user=my$("note_user");
			var note_verification=my$("note_verification");
			var btn_notelogin=my$("btn_notelogin");
			var alertObj=my$("alert");
			$(document).ready(function () {
					$(document).click(function () {
						$("#send_note").attr("disabled", "disabled");
						if (note_user.value != "") {
							$("#send_note").removeAttr("disabled");
						}
					});
				});
			btn_notelogin.onclick=function(){
				if (note_user.value=="" && note_verification.value=="") {
					alertObj.style.display="block";
					alertObj.style.top="60%";
					alertObj.innerHTML="请输入手机号、短信验证码！";
					setRed(note_user);
					setRed(note_verification);
				}else if (note_user.value=="") {
					alertObj.style.display="block";
					alertObj.style.top="44%";
					alertObj.innerHTML="手机号不能为空！";
					setRed(note_user);
				}else if (note_verification.value=="") {
					alertObj.style.display="block";
					alertObj.style.top="60%";
					alertObj.innerHTML="短信验证码不能为空！";
					setRed(note_verification);
				}	
				note_user.onclick = function () {
					setReduction(note_user);
					setReduction(note_verification);
				}
				note_verification.onclick = function () {
					setReduction(note_user);
					setReduction(note_verification);
				}	
			}

			// 退出登录
			$("#btn_idback").click(function () {
				window.location.href="../蜂巢装修网前端页面/fc-index.html";
			});
			$("#btn_noteback").click(function () {
				window.location.href="../蜂巢装修网前端页面/fc-index.html";
			});
			$("#Back_home").click(function () {
				window.location.href="../蜂巢装修网前端页面/fc-index.html";
			});
	</script>
</body>



</html>